<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100vh;
      max-height: 100vh;
      overflow: hidden;
    "
  >
    <div style="height: 20vh; background-color: #09a3d6">我是头部</div>
    <div style="flex-grow: 1; overflow: auto;z-index: 9999999;">
      <el-table :data="tableData" style="width: 100%; height: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div style="height: 5vh; background-color: #09a3d6">我是搜索框</div>
  </div>
  <button @click="btnFun">dianji</button>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";

let tableData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

const btnFun = () => {
  let res = [
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
  ];
  tableData.splice(0, tableData.length, ...res); //直接在原数组上删除并插入新的数据
};
</script>